<template>
    <div class="xtx-carousel">
        <div class="slider" v-for="(item, key) in lei" :key="key" v-show="imglist == key">
            <RouterLink v-for="(i, k) in lei[key]" :key="k" to="/">
                <img :src="i.picture" alt />
                <p class="name ellipsis">{{ i.name }}</p>
                <p class="price">&yen;{{ i.price }}</p>
            </RouterLink>
        </div>

        <a href="javascript:;" class="carousel-btn prev" @click="prev()">
            <i class="iconfont icon-angle-left"></i>
        </a>
        <a href="javascript:;" class="carousel-btn next" @click="next()">
            <i class="iconfont icon-angle-right"></i>
        </a>
        <div class="carousel-indicator">
            <span v-for="(item, key) in lei.length" :key="key" @click="witch(key)"
                :class="{ liang: key == imglist }"></span>
        </div>
        <!-- {{lei}} -->
    </div>
</template>
    
<script>
export default {
    props: ["tong"],
    data() {
        return {
            // img: [],
            imglist: 0
            // times: null,
        };
    },
    methods: {
        prev() {
            if (this.imglist <= 0) {
                this.imglist = this.lei.length;
            }
            this.imglist--;
            clearInterval(this.times);
        },
        next() {
            if (this.imglist >= this.lei.length - 1) {
                this.imglist = -1;
            }
            this.imglist++;
        },
        witch(k) {
            this.imglist = k
        }
    },
    mounted() { },
    computed: {
        lei() {
            var sliders = [];
            const size = 4;
            const total = Math.ceil(this.tong.length / size);
            for (let i = 0; i < total; i++) {
                sliders.push(this.tong.slice(i * size, (i + 1) * size));
            }
            return sliders;
        }
    }
};
</script>
    
<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.xtx-carousel {
    width: 100%;
    height: 100%;
    min-width: 1240px;
    min-height: 350px;
    position: relative;

    .carousel {
        &-body {
            width: 100%;
            height: 100%;
        }

        &-item {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 0.5s linear;

            &.fade {
                opacity: 1;
                z-index: 1;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        &-indicator {
            position: absolute;
            left: 0;
            bottom: 20px;
            z-index: 2;
            width: 100%;
            text-align: center;

            span {
                display: inline-block;
                width: 12px;
                height: 12px;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 50%;
                cursor: pointer;

                ~span {
                    margin-left: 12px;
                }

                &.active {
                    background: #fff;
                }
            }
        }

        &-btn {
            width: 44px;
            height: 44px;
            color: rgb(150, 150, 150);
            background: #fff;
            border-radius: 50%;
            position: absolute;
            top: 135px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 1;
            transition: all 0.5s;

            &.prev {
                left: 20px;
                // background: red;
                // margin-left: 240px;
            }

            &.next {
                right: 20px;
            }
        }
    }

    &:hover {
        .carousel-btn {
            opacity: 1;
        }
    }
}

.liang {
    background-color: #27ba9b !important;
}

.slider {
    display: flex;
    justify-content: space-around;
    padding: 0 40px;

    >a {
        width: 240px;
        text-align: center;

        img {
            padding: 20px;
            width: 230px !important;
            height: 230px !important;
        }

        .name {
            font-size: 16px;
            color: #666;
            padding: 0 40px;
        }

        .price {
            font-size: 16px;
            color: red;
            margin-top: 15px;
        }
    }
}

:deep(.xtx-carousel) {
    height: 380px;

    .carousel {
        &-indicator {
            bottom: 30px;

            span {
                &.active {
                    background: $xtxColor;
                }
            }
        }

        &-btn {
            top: 110px;
            opacity: 1;
            background: rgba(0, 0, 0, 0);
            color: #ddd;

            i {
                font-size: 30px;
            }
        }
    }
}
</style>
    